<template>
  <div class="travel-wrap">
    <!-- 单独完整一个 -->
    <div class="wrap-box" v-for="(item, index) in datas" :key="index">
      <!-- 上部分 -->
      <div class="day-item">
        <span class="sp">D{{ index + 1 }}</span>
        <router-link to="" class="router-link">巴厘岛</router-link>
        <div class="item-line"></div>
        <p>
          {{item.title1}}
        </p>
        <ul class="list1">
          <li>
            <span class="sp1"></span>
            <router-link to="" class="a1">情人崖</router-link>
            <span class="time">(2小时)</span>
          </li>
        </ul>
        <!-- 图片部分 -->
        <ul class="list2">
          <li>
            <router-link to="" class="pics">
              <img :src="item.image1" alt=""  />
              <div class="mask-title"><h3>情人崖</h3></div>
              <!-- 悬停部分 -->
              <div class="mask-info">
                <div class="middle">
                  <h3>情人崖</h3>
                  <p>巴厘岛的爱情圣地,很多人在此就行婚礼</p>
                </div>
              </div>
            </router-link>
          </li>
        </ul>
        
      </div>
      <!-- 住宿部分 -->
      <div class="asidebtm">
        <div class="as1">
          <span class="sp3"></span>
          <span class="sp4">住宿攻略</span>
          <div class="inline"></div>
          <p>
            库塔以冲浪和夜生活闻名，如果首选方便热闹的话住在库塔是一个不错的选择。
          </p>
        </div>

        <div class="one-img">
          <router-link to="" class="rot">
            <!-- 图片 -->
            <img :src="item.image2" alt=""  />
            <!-- 悬停文字 -->
            <div class="title">
              <h3>库塔(Kuta)</h3>
            </div>
            <!-- 悬停文字 -->
            <div class="mask">
              <div class="mid">
                <h3>库塔(Kuta)</h3>
                <p>
                  {{item.title2}}
                </p>
              </div>
            </div>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["detailData"],
  name: "WorkspaceJsonTravel",

  data() {
    return {
      fullscreenLoading: true,

      datas:[
          {
              id:1,
              title1:'早上前往加德满都杜巴广场，其中的一座就是活女神庙。途经博达哈大佛塔，巨大的白色佛塔上飘扬着彩色的经幡。接着前往巴德岗杜巴广场，寻找到神秘的尼泊尔地道传统。最后前往纳加阔特。如果能见度高能看到珠穆朗玛峰，可拍摄喜玛拉雅雪山全景。',
              title2:'费瓦湖湖边区域是博卡拉的心脏地带，餐馆、客栈、旅行社、纪念品店林立。这里住宿条件普遍较好，湖景房景色很赞但价格也相对较高。',
              image1:'https://n1-q.mafengwo.net/s7/M00/63/FE/wKgB6lRJKbyAcaDDAAjTzTgj-So59.jpeg?imageMogr2%2Fthumbnail%2F%21270x180r%2Fgravity%2FCenter%2Fcrop%2F%21270x180%2Fquality%2F100',
              image2:'https://b1-q.mafengwo.net/s8/M00/27/52/wKgBpVUbkuCALPXtAEmSRTec-kk47.jpeg?imageMogr2%2Fthumbnail%2F%21235x150r%2Fgravity%2FCenter%2Fcrop%2F%21235x150%2Fquality%2F100'
          },
          {
              id:2,
              title1:'清晨观赏喜玛拉雅雪山全景和日出，早上乘车前往博卡拉，来到费瓦湖湖边，泛舟湖上，游览湖中小岛上的夏克蒂女神庙。',
              title2:'加德满都山谷边缘地区以迷人的山区景色著称，而这里的景色堪称第一。',
              image1:'https://b1-q.mafengwo.net/s11/M00/40/14/wKgBEFtewzeAMoSfAAwVjU7cPTM78.jpeg?imageMogr2%2Fthumbnail%2F%21270x180r%2Fgravity%2FCenter%2Fcrop%2F%21270x180%2Fquality%2F100',
              image2:'https://n1-q.mafengwo.net/s10/M00/D0/E7/wKgBZ1ld3x2AHm7eAAUXKq1PgNE99.jpeg?imageMogr2%2Fthumbnail%2F%21270x180r%2Fgravity%2FCenter%2Fcrop%2F%21270x180%2Fquality%2F100'
          },
          {
              id:3,
              title1:'早上前往南丫浦开始徒步，经伯尔塞提 (登山证盖章) ，前往乌勒里，四周壮美的山峰和宁静的风光，晚上入住路边客栈，享受安娜普尔纳山村飘过的炊烟，享受夜晚山间宁静的时光。',
              title2:'早上沿着山间小道继续行山，路程以南亚热带雨林为主，从乌勒里到戈勒帕尼，观赏鱼尾峰这座神山，每年的4月更是可以看到五彩缤纷的杜鹃花。',
              image1:'https://n1-q.mafengwo.net/s12/M00/4A/B4/wKgED1vF0q-AFs2jABAOeKxPRM801.jpeg?imageMogr2%2Fthumbnail%2F%21270x180r%2Fgravity%2FCenter%2Fcrop%2F%21270x180%2Fquality%2F100',
              image2:'https://b1-q.mafengwo.net/s11/M00/07/9C/wKgBEFtfqkqAWCGXACo2yglUOQ487.jpeg?imageMogr2%2Fthumbnail%2F%21270x180r%2Fgravity%2FCenter%2Fcrop%2F%21270x180%2Fquality%2F100'
          },
          {
              id:4,
              title1:'清晨从驻地戈勒帕尼出发登顶布恩山，在Poon Hill观看日出，早餐后前往塔达帕尼、冈杜克，晚上享受山里最后的美好时光。',
              title2:'泰美尔是自助旅行者的聚集地，通常是人们到加都后的第一站。这里有各式旅馆，旅游代理、货币兑换处、商店、酒吧、餐厅也随处可见。',
              image1:'https://n1-q.mafengwo.net/s13/M00/76/32/wKgEaVy9-_eAe2f2AAxVz53Apj084.jpeg?imageMogr2%2Fthumbnail%2F%21270x180r%2Fgravity%2FCenter%2Fcrop%2F%21270x180%2Fquality%2F100',
              image2:'https://n1-q.mafengwo.net/s6/M00/8D/7A/wKgB4lJlFuiAO2wEAAGmT1eJ7sY59.jpeg?imageMogr2%2Fthumbnail%2F%21270x180r%2Fgravity%2FCenter%2Fcrop%2F%21270x180%2Fquality%2F100'
          }
      ]
    };
  },

  mounted() {},

  methods: {},
};
</script>

<style lang="scss" scoped>
.travel-wrap {
  width: 1200px;
  min-height: 800px;
  margin: 0 auto;
  padding: 40px;
  box-sizing: border-box;
  .wrap-box {
    //上部分
    img{
        width: 270px;
        height: 180px;
    }
    position: relative;
    .day-item {
      width: 938px;
      height: 735px;
      border-left: 1px solid #d8d8d8;
      left: 106px;
      position: absolute;
      position: relative;
      padding-left: 35px;
      padding-top: 20px;
      .sp {
        display: block;
        width: 45px;
        height: 45px;
        line-height: 45px;
        border: 1px solid #d8d8d8;
        background-color: #666666;
        border-radius: 50%;
        position: absolute;
        left: -24px;
        text-align: center;
        color: #ffffff;
        font-size: 18px;
      }
      .router-link {
        padding-top: 15px;
        font-size: 20px;
        color: #666666;
        text-decoration: none;
      }
      .router-link:hover {
        text-decoration: underline;
      }
      //  下划线
      .item-line {
        border-bottom: 1px solid #d8d8d8;
        width: 938px;
        height: 20px;
        margin-bottom: 25px;
      }
      //文字部分
      .list1 {
        margin-top: 20px;
        height: 45px;
        width: 100%;
        list-style: none;
        line-height: 45px;
        margin-bottom: 20px;
        li {
          width: 200px;
          .sp1 {
            display: inline-block;
            width: 25px;
            height: 29px;
            background-image: url(https://css.mafengwo.net/images/mdd/place/line-details-sprites7.png);
            background-position-y: -130px;
            background-position-x: 203px;
          }
          .a1 {
            text-decoration: none;
            font-size: 14px;
            color: #ff9d00;
            line-height: 35px;
          }
          .time {
            color: #666666;
            font-size: 12px;
          }
        }
      }
      // 图片部分 悬停效果
      .list2 {
        height: 180px;
        width: 938px;
        margin: 0 auto;
        list-style: none;
        li {
          width: 270px;
          height: 180px;
          position: relative;
          .pics {
            text-decoration: none;
            display: block;
            color: #ffffff;
            .mask-title {
              width: 229px;
              height: 38px;
              position: absolute;
              left: 20px;
              bottom: 0px;
            }
            .mask-info {
              width: 100%;
              height: 100%;
              position: absolute;
              left: 0;
              top: 100%;
              right: 0px;
              bottom: 0px;
              font-size: 14px;
              line-height: 20px;
              display: none;
              background: linear-gradient(
                to bottom,
                rgba(0, 0, 0, 0) 0,
                rgba(0, 0, 0, 0.3) 50%,
                rgba(0, 0, 0, 0.8) 100%
              );
              transition: top 0.5s ease 0s;
              text-shadow: 0 1px 2px #999999;

              .middle {
                width: 229px;
                height: 81px;
                margin-left: 18px;
                margin-top: 40px;
                h3 {
                  font-size: 18px;
                  margin-bottom: 10px;
                }
              }
            }
          }
        }
        li:hover .mask-info {
          display: block;
          top: 0;
        }
        li:hover .mask-title {
          display: none;
        }
      }
    }
    //住宿部分
    .asidebtm {
      margin-top: 10px;
      width: 938px;
      height: 320px;
      position: absolute;
      top: 400px;
      left: 106px;
      padding-left: 35px;
      .as1 {
        height: 96px;
        font-size: 18px;
        line-height: 42px;
        .sp3 {
          display: inline-block;
          width: 30px;
          height: 29px;
          background-image: url(https://css.mafengwo.net/images/mdd/place/line-details-sprites7.png);
          background-position-x: 203px;
          background-position-y: -25px;
        }
        .sp4 {
          display: inline-block;
          height: 30px;
          line-height: 30px;
        }
        .inline {
          margin-top: 15px;
          border-bottom: 1px solid #d8d8d8;
          width: 938px;
          height: 0;
        }
      }
      .one-img {
        width: 270px;
        height: 180px;
        margin-top: 20px;
        .rot {
          text-decoration: none;
          display: inline-block;
          position: relative;
          .title {
            position: absolute;
            width: 270px;
            height: 40px;
            left: 0px;
            bottom: 0px;
            background: rgb(188, 188, 196);
            font-size: 20px;
            color: #ffffff;
            line-height: 40px;
            padding-left: 20px;
            box-sizing: border-box;
          }
          .mask {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 100%;
            right: 0px;
            bottom: 0px;
            font-size: 14px;
            line-height: 20px;
            display: none;
            background: linear-gradient(
              to bottom,
              rgba(0, 0, 0, 0) 0,
              rgba(0, 0, 0, 0.3) 50%,
              rgba(0, 0, 0, 0.8) 100%
            );
            transition: top 0.5s ease 0s;
            text-shadow: 0 1px 2px #999999;
            color: #ffffff;
            .mid {
              width: 229px;
              height: 81px;
              margin-left: 18px;
              margin-top: 40px;
              h3 {
                font-size: 24px;
                margin-bottom: 10px;
              }
            }
          }
        }
      }
      .one-img:hover .mask {
        display: block;
        top: 0px;
      }
      .one-img:hover .title {
        display: none;
      }
    }
  }
  // 其他路线
  .aside-center {
    height: 300px;
    width: 1000px;
    margin-left: 60px;
    text-align: center;
    padding-top: 30px;
    font-size: 24px;
    color: #333;
    padding-left: 5px;
    ul {
      margin-top: 30px;
      list-style: none;
      width: 600px;
      height: 240px;
      li {
        float: left;
        width: 250px;
        height: 210px;
        margin-right: 20px;
        .router-link {
          display: block;
          text-decoration: none;
          padding-left: 5px;

          .pics {
            width: 234px;
            height: 152px;
            display: inline-block;
          }
          .texts {
            width: 223px;
            height: 50px;
            padding-left: 10px;
            text-align: left;
            font-size: 16px;
            font-weight: normal;
            color: #666;
            border-top: 0;
            border: 1px solid #d8d8d8;
            margin-top: -7px;
            margin-left: 5px;
          }
        }
      }
    }
  }
}
</style>